<!DOCTYPE html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>商品展示</title>
<style type="text/css">

/*定宽内容加padding时总体宽高尺寸不变*/
* {
   -moz-box-sizing: border-box;  /*Firefox3.5+*/
   -webkit-box-sizing: border-box; /*Safari3.2+*/
   -o-box-sizing: border-box; /*Opera9.6*/
   -ms-box-sizing: border-box; /*IE8*/
   box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
div,ul,li,dl,dt,dd{
	margin:0;
	padding:0;
}
ul,li,dl,dt,dd{
	list-style:none;
}
img{
  border:none;
}
.demo{
	margin:0 auto;
	width:930px;
}
/*单个元素的宽度300px(包括边框)*/
.demo ul li{
	float:left;
	width:300px;
	margin-right:6px;
	position:relative;
}
/*元素块级超链接+边框2px*/
.demo ul li a{
	width:300px;
  height:174px;
  display:block;
	border:2px solid #ccc;
}
/*图像的宽度需要扣除两侧边框宽度4px*/
.demo ul li img{
  width:296px;
  height:170px;
	position:relative;
	z-index:22;
}
/*鼠标悬浮时候边框颜色变淡*/
.demo ul li a:hover{
	border:2px solid #eee;
}
/*元素内覆膜文字内容宽度也要扣除两侧边框宽度*/
.demo ul li a span{
  position:absolute;
	z-index:33;
	bottom:2px;
	left:2px;
	width:296px;
	height:40px;
	filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;
	background:#000;
	color:#fff;
	line-height:40px;
  padding-left:10px;
  font-size:12px;
	text-align:left;
	display:none;
}
/*鼠标悬浮时候文字出现*/
.demo ul li a:hover span{
	display:block;
}
</style>
</head>
<body>
 <div class="demo">
    <ul>
       <li>
         <a href="http://imooc.com">
           <img src="1.jpg"  />
           <span>学会html5 绝对的屌丝逆袭</span>
         </a>
       </li>
       <li>
         <a href="http://imooc.com">
           <img src="2.jpg"  />
           <span>圆角水晶按钮制作</span>
         </a>
       </li>
       <li>
         <a href="http://imooc.com">
           <img src="3.jpg"  />
           <span>8小时助你攻下html与css样式代码</span>
         </a>
       </li>
    </ul>
 </div>
</body>
</html>
